<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">
    <!--      <tr>-->
    <!--        <td>1</td>-->
    <!--        <td>sb</td>-->
    <!--        <td>19</td>-->
    <!--      </tr>-->
    </tbody>
</table>
<input type="text" placeholder="请输入内容" id="txtuser">
<input type="button" value="添加" onclick="addCityInfo()">
<ul id="city">

</ul>

<script type="text/javascript">
    var datalist = [
        {id: 1, name: "冻脚", age: 19},
        {id: 2, name: "唐货", age: 19},
        {id: 3, name: "抽象", age: 19},
        {id: 4, name: "《甜妹》", age: 19}
    ];
    // var info = {id: 1, name: "狗瑞", age: 10}

    for (var idx in datalist) {
        var info = datalist[idx];

        var tr = document.createElement("tr");
        for (var key in info) {
            var text = info[key];
            var td = document.createElement("td");
            td.innerText = text;
            tr.appendChild(td);
        }
        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr);
    }


    function addCityInfo() {
        //1.找到输入的标签
        var txtTag = document.getElementById("txtuser");

        //2.获取input框中用户输入的内容
        var newString = txtTag.value;

        //用户输入是否为空，只有不为空才继续
        if (newString.length > 0) {
            //3.创建标签,<li></li>中间文本信息就是用户输入的内容
            var newTag = document.createElement("li");
            newTag.innerText = newString;

            //4.标签添加到ul中
            var parentTag = document.getElementById("city");
            parentTag.appendChild(newTag);

            //5.将input框内容清空
            txtTag.value = "";
        }else{
            alert("不能为空")
        }
    }
</script>
</body>
</html>